<template>
  <div class="container">
    <div class="home-content">
      <!-- 顶部标签导航 -->
      <div class="tab-navigation">
        <el-tabs v-model="activeTab" @tab-click="handleTabChange">
          <el-tab-pane label="推荐" name="recommend"></el-tab-pane>
          <el-tab-pane label="热榜" name="hot"></el-tab-pane>
          <el-tab-pane v-if="isLogin === true" label="关注" name="follow"></el-tab-pane>
        </el-tabs>
      </div>
      
      <!-- 问题列表 -->
      <div class="content-layout">
        <!-- 主内容区 -->
        <div class="main-area">
          <!-- 排序选择 -->
          <div class="sorting-options">
            <el-select v-model="sortBy" size="small" placeholder="排序方式">
              <el-option label="最新发布" value="newest"></el-option>
              <el-option label="最多回答" value="most_answers"></el-option>
              <el-option label="热门问题" value="hot"></el-option>
            </el-select>
          </div>
          
          <!-- 问题列表 -->
          <div v-if="loading" class="question-list-loading">
            <el-skeleton :rows="10" animated />
          </div>
          
          <div v-else-if="questions.length === 0" class="empty-list">
            <el-empty description="暂无问题"></el-empty>
          </div>
          
          <div v-else class="question-list">
            <div
              v-for="question in questions"
              :key="question.id"
              class="question-card"
              @click="viewQuestionDetail(question.id)"
            >
              <!-- 问题卡片头部（用户信息） -->
              <div class="question-card-header">
                <el-avatar :size="36" :src="question.user?.avatar || question.avatar || 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'"></el-avatar>
                <div class="user-info">
                  <div class="username">{{ question.user?.username || question.username || question.nickname || '用户' }}</div>
                  <div class="publish-time">发布于 {{ formatTime(question.createTime) }} · 浏览 {{ question.viewCount }}</div>
                </div>
              </div>
              
              <!-- 问题标题和内容预览 -->
              <div class="question-content">
                <h3 class="question-title">{{ question.title }}</h3>
                <p class="question-preview">{{ question.content }}</p>
                <div class="tags" v-if="getQuestionTags(question).length > 0">
                  <el-tag
                    v-for="tag in getQuestionTags(question)"
                    :key="tag"
                    size="small"
                    effect="plain"
                    class="tag-item"
                  >
                    {{ tag }}
                  </el-tag>
                </div>
              </div>
              
              <!-- 问题标签和统计 -->
              <div class="question-footer">
                <div class="interaction-area">
                  <!-- 投票区域 -->
                  <div class="vote-area">
                    <el-button
                      class="vote-btn"
                      type="text"
                      :class="{ 'is-active': question.userVoteStatus === 1 }"
                      @click.stop="isLogin === true ? handleVote(question.id, 'up') : router.push('/login')"
                    >
                      <el-icon><CaretTop /></el-icon>
                    </el-button>
                    <span class="vote-count">{{ question.voteCount || 0 }}</span>
                    <el-button
                      class="vote-btn"
                      type="text"
                      :class="{ 'is-active': question.userVoteStatus === -1 }"
                      @click.stop="isLogin === true ? handleVote(question.id, 'down') : router.push('/login')"
                    >
                      <el-icon><CaretBottom /></el-icon>
                    </el-button>
                  </div>

                  <!-- 回答数量 -->
                  <div class="answer-count">
                    <el-icon><ChatLineSquare /></el-icon>
                    <span>{{ question.answerCount || 0 }}条回答</span>
                  </div>

                  <!-- 收藏 -->
                  <el-button
                    type="text"
                    class="action-btn"
                    :class="{ 'is-active': question.isCollected }"
                    @click.stop="isLogin === true ? handleBookmark(question.id) : router.push('/login')"
                  >
                    <el-icon><Star /></el-icon>
                    <span>{{ question.isCollected ? '已收藏' : '收藏' }}</span>
                  </el-button>

                  <!-- 喜欢 -->
                  <el-button
                    type="text"
                    class="action-btn"
                    :class="{ 'is-active': question.userVoteStatus === 2 }"
                    @click.stop="isLogin === true ? handleLike(question.id) : router.push('/login')"
                  >
                    <el-icon><StarFilled /></el-icon>
                    <span>{{ question.userVoteStatus === 2 ? '已喜欢' : '喜欢' }}</span>
                  </el-button>

                  <!-- 分享 -->
                  <el-button type="text" class="action-btn" @click.stop="handleShare(question)">
                    <el-icon><Share /></el-icon>
                    <span>分享</span>
                  </el-button>
                </div>
              </div>
            </div>
            
            <!-- 加载更多 -->
            <div class="load-more-container" v-if="hasMoreQuestions">
              <el-button plain @click="loadMore">加载更多</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '../stores/user'
import { useQuestionStore } from '../stores/question'
import { ElMessage, ElLoading, ElMessageBox } from 'element-plus'
import {
  CaretTop,
  CaretBottom,
  ChatLineSquare,
  Star,
  StarFilled,
  Share
} from '@element-plus/icons-vue'
import { collectQuestion, cancelCollect, checkQuestionCollected } from '../api/collection'
import { voteAnswer, cancelVote, checkVoteStatus as apiCheckVoteStatus } from '../api/vote'
import { generateShareLink } from '../api/share'

import ShareButton from '../components/ShareButton.vue'

export default {
  name: 'HomePage',
  components: {
    ShareButton,
    CaretTop,
    CaretBottom,
    ChatLineSquare,
    Star,
    StarFilled,
    Share
  },
  setup() {
    const router = useRouter()
    const questionStore = useQuestionStore()
    const userStore = useUserStore()
    
    const activeTab = ref('recommend')
    const sortBy = ref('newest')
    const loading = ref(true)
    const page = ref(1)
    const hasMoreQuestions = ref(true)
    const isLogin = computed(() => userStore.isLogin)
    
    // 添加响应式引用 userStore 到 vue 模板中使用
    const userStoreRef = computed(() => userStore)
	  
    
    // 获取问题列表
    const fetchQuestions = async () => {
      loading.value = true;
      console.log("当前激活的标签:", activeTab.value);
      try {
        // 根据当前激活的标签页选择不同的API调用
        if (activeTab.value === 'recommend') {
          // 推荐问题
          console.log("调用推荐问题API");
          await questionStore.fetchRecommendQuestions();
        } else if (activeTab.value === 'follow') {
          // 关注的用户问题
          console.log("调用关注问题API");
          if (isLogin.value) {
            await questionStore.fetchFollowingQuestions();
          } else {
            ElMessage.warning('请先登录后查看关注内容');
            activeTab.value = 'recommend';
            await questionStore.fetchRecommendQuestions();
          }
        } else if (activeTab.value === 'hot') {
          // 热门问题
          console.log("调用热门问题API");
          await questionStore.fetchHotQuestions();
        }
        
        hasMoreQuestions.value = questionStore.questions.length >= 10;
        
        // 如果用户已登录，检查收藏和投票状态
        if (isLogin.value) {
          await Promise.all([
            checkCollectionStatus(),
            checkVotesStatus()
          ]);
        }
      } catch (error) {
        console.error('获取问题列表失败:', error);
        ElMessage.error('获取问题列表失败，请刷新页面重试');
      } finally {
        loading.value = false;
      }
    }
    
    // 检查问题收藏状态
    const checkCollectionStatus = async () => {
      try {
        const questions = questionStore.questions;
        if (!questions || questions.length === 0) return;
        
        // 为每个问题检查收藏状态
        await Promise.all(questions.map(async (question) => {
          try {
            const res = await checkQuestionCollected(question.id);
            question.isCollected = res.data;
          } catch (error) {
            console.error(`检查问题 ${question.id} 收藏状态失败:`, error);
          }
        }));
      } catch (error) {
        console.error('检查收藏状态失败:', error);
      }
    }
    
    // 检查问题投票状态
    const checkVotesStatus = async () => {
      try {
        const questions = questionStore.questions;
        if (!questions || questions.length === 0) return;
        
        // 为每个问题检查投票状态
        await Promise.all(questions.map(async (question) => {
          try {
            const res = await apiCheckVoteStatus(question.id);
            // 根据返回值设置投票状态
            if (res.data) {
              question.userVoteStatus = res.data.voteType;
            } else {
              question.userVoteStatus = 0; // 未投票
            }
          } catch (error) {
            console.error(`检查问题 ${question.id} 投票状态失败:`, error);
            question.userVoteStatus = 0; // 出错时默认为未投票
          }
        }));
      } catch (error) {
        console.error('检查投票状态失败:', error);
      }
    }
    
    // 监听标签页变化重新加载数据
    const handleTabChange = (tab) => {
      console.log("标签切换事件:", tab)
      // 直接使用tab.props.name作为标识符
      activeTab.value = tab.props.name
      console.log("设置activeTab为:", activeTab.value)
      page.value = 1
      fetchQuestions()
    }
    
    // 加载更多问题
    const loadMore = async () => {
      page.value++;
      try {
        loading.value = true;
        
        // 根据当前激活的标签页选择不同的API调用
        if (activeTab.value === 'recommend') {
          // 推荐问题
          await questionStore.fetchRecommendQuestions({
            current: page.value,
            size: 10
          });
        } else if (activeTab.value === 'follow') {
          // 关注的用户问题
          await questionStore.fetchFollowingQuestions({
            current: page.value,
            size: 10
          });
        } else if (activeTab.value === 'hot') {
          // 热门问题
          await questionStore.fetchHotQuestions({
            current: page.value,
            size: 10
          });
        }
        
        // 检查是否还有更多数据
        hasMoreQuestions.value = questionStore.questions.length >= page.value * 10;
        
        // 如果用户已登录，检查收藏和投票状态
        if (isLogin.value) {
          await Promise.all([
            checkCollectionStatus(),
            checkVotesStatus()
          ]);
        }
      } catch (error) {
        console.error('加载更多问题失败:', error);
        ElMessage.error('加载更多问题失败');
      } finally {
        loading.value = false;
      }
    }
    
    // 查看问题详情
    const viewQuestionDetail = (id) => {
      router.push(`/questions/${id}`)
    }
    
    // 处理投票（点赞/踩）
    const handleVote = async (questionId, voteType) => {
      try {
        const question = questionStore.questions.find(q => q.id === questionId);
        if (!question) return;
        
        // 判断是点赞还是取消点赞
        if (voteType === 'up') {
          // 如果当前已经是点赞状态，则取消点赞
          if (question.userVoteStatus === 1) {
            await cancelVote(questionId);
            question.userVoteStatus = 0;
            question.voteCount = Math.max(0, (question.voteCount || 0) - 1);
            ElMessage.success('已取消点赞');
          } else {
            // 调用点赞API
            await voteAnswer({
              answerId: questionId,
              voteType: 1 // 1表示赞成
            });
            // 如果之前是踩，需要先减去踩的计数
            if (question.userVoteStatus === -1) {
              question.voteCount = (question.voteCount || 0) + 2; // 减掉踩再加上赞
            } else {
              question.voteCount = (question.voteCount || 0) + 1;
            }
            question.userVoteStatus = 1;
            ElMessage.success('点赞成功');
          }
        } else if (voteType === 'down') {
          // 如果当前已经是踩状态，则取消踩
          if (question.userVoteStatus === -1) {
            await cancelVote(questionId);
            question.userVoteStatus = 0;
            question.voteCount = (question.voteCount || 0) + 1; // 取消踩，票数加1
            ElMessage.success('已取消踩');
          } else {
            // 调用踩API
            await voteAnswer({
              answerId: questionId,
              voteType: -1 // -1表示反对
            });
            // 如果之前是赞，需要先减去赞的计数
            if (question.userVoteStatus === 1) {
              question.voteCount = (question.voteCount || 0) - 2; // 减掉赞再减去踩
            } else {
              question.voteCount = (question.voteCount || 0) - 1;
            }
            question.userVoteStatus = -1;
            ElMessage.success('已踩');
          }
        }
      } catch (error) {
        console.error('投票失败:', error);
        ElMessage.error('操作失败，请重试');
      }
    }
    
    // 处理收藏
    const handleBookmark = async (questionId) => {
      try {
        const question = questionStore.questions.find(q => q.id === questionId);
        if (!question) return;
        
        // 显示操作中的加载状态
        const loading = ElLoading.service({
          lock: true,
          text: question.isCollected ? '取消收藏中...' : '收藏中...',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        
        try {
          if (question.isCollected) {
            await cancelCollect(questionId);
            question.isCollected = false;
            ElMessage({
              message: '已取消收藏',
              type: 'success',
              duration: 1500
            });
          } else {
            await collectQuestion(questionId);
            question.isCollected = true;
            ElMessage({
              message: '收藏成功',
              type: 'success',
              duration: 1500
            });
          }
        } finally {
          loading.close();
        }
      } catch (error) {
        console.error('收藏操作失败:', error);
        ElMessage.error('操作失败，请重试');
      }
    }
    
    // 处理喜欢
    const handleLike = async (questionId) => {
      try {
        const question = questionStore.questions.find(q => q.id === questionId);
        if (!question) return;
        
        // 显示操作中的加载状态
        const loading = ElLoading.service({
          lock: true,
          text: question.userVoteStatus === 2 ? '取消喜欢中...' : '添加喜欢中...',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        
        try {
          if (question.userVoteStatus === 2) {
            // 已喜欢，则取消
            await cancelVote(questionId);
            question.userVoteStatus = 0;
            ElMessage({
              message: '已取消喜欢',
              type: 'success',
              duration: 1500
            });
          } else {
            // 未喜欢，则添加
            await voteAnswer({
              answerId: questionId,
              voteType: 2 // 2表示喜欢
            });
            question.userVoteStatus = 2;
            ElMessage({
              message: '已添加到喜欢',
              type: 'success',
              duration: 1500
            });
          }
        } finally {
          loading.close();
        }
      } catch (error) {
        console.error('操作失败:', error);
        ElMessage.error('操作失败，请重试');
      }
    }
    
    // 处理分享
    const handleShare = async (question) => {
      try {
        // 显示加载状态
        const loading = ElLoading.service({
          lock: true,
          text: '生成分享链接中...',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        
        try {
          // 调用分享链接生成API
          const res = await generateShareLink({
            targetType: 1, // 1表示问题
            targetId: question.id,
            platform: 4 // 4表示链接分享
          });
          
          // 如果API返回分享链接
          let shareUrl = res.data;
          
          // 如果没有返回链接，则使用默认链接
          if (!shareUrl) {
            shareUrl = `${window.location.origin}/questions/${question.id}`;
          }
          
          // 使用弹窗显示分享选项
          ElMessageBox.confirm(
            `<div style="text-align:center;margin-bottom:10px;">
              <input id="share-link" value="${shareUrl}" readonly style="width:100%;padding:8px;margin-bottom:10px;" />
              <div style="margin-top:10px;">
                <button id="copy-btn" class="el-button el-button--primary" style="margin-right:10px;">
                  复制链接
                </button>
                <a href="https://service.weibo.com/share/share.php?url=${encodeURIComponent(shareUrl)}&title=${encodeURIComponent('分享一个有趣的问题：' + question.title)}" target="_blank" class="el-button el-button--danger">
                  分享到微博
                </a>
              </div>
            </div>`,
            '分享链接',
            {
              confirmButtonText: '关闭',
              showCancelButton: false,
              dangerouslyUseHTMLString: true,
              callback: action => {
                if (action === 'confirm') {
                  // 关闭弹窗
                }
              }
            }
          );
          
          // 添加复制按钮事件处理
          setTimeout(() => {
            const copyBtn = document.getElementById('copy-btn');
            const shareInput = document.getElementById('share-link');
            
            if (copyBtn && shareInput) {
              copyBtn.addEventListener('click', () => {
                shareInput.select();
                document.execCommand('copy');
                ElMessage.success('链接已复制到剪贴板');
              });
            }
          }, 100);
        } finally {
          loading.close();
        }
      } catch (error) {
        console.error('生成分享链接失败:', error);
        // 失败时使用默认链接
        const shareUrl = `${window.location.origin}/questions/${question.id}`;
        // 复制到剪贴板
        try {
          await navigator.clipboard.writeText(shareUrl);
          ElMessage.success('链接已复制到剪贴板');
        } catch (clipboardError) {
          ElMessage.warning('复制失败，链接为：' + shareUrl);
        }
      }
    }
    
    // 格式化时间
    const formatTime = (timestamp) => {
      if (!timestamp) return '';
      
      const now = new Date();
      const date = new Date(timestamp);
      const diff = Math.floor((now - date) / 1000); // 时间差（秒）
      
      if (diff < 60) {
        return `${diff}秒前`;
      } else if (diff < 3600) {
        return `${Math.floor(diff / 60)}分钟前`;
      } else if (diff < 86400) {
        return `${Math.floor(diff / 3600)}小时前`;
      } else if (diff < 604800) {
        return `${Math.floor(diff / 86400)}天前`;
      } else {
        return date.toLocaleDateString();
      }
    }
    
    // 获取问题标签
    const getQuestionTags = (question) => {
      // 如果有标签列表，直接返回
      if (question.tagList && Array.isArray(question.tagList)) {
        return question.tagList;
      }
      // 如果有标签字符串，按逗号拆分
      if (question.tags) {
        return question.tags.split(',').map(tag => tag.trim());
      }
      return [];
    }

    
    // 组件挂载时检查并获取用户信息
    onMounted(async () => {
      if (localStorage.getItem('token') && !userStore.userInfo) {
        await userStore.fetchUserInfo();
      }
      
      // 获取问题列表
      await fetchQuestions();
      
      // 获取热门话题和活跃用户
      await Promise.all([
        fetchHotTopics(),
        fetchActiveUsers()
      ]);
    });
    
    return {
      activeTab,
      sortBy,
      loading,
      questions: computed(() => questionStore.questions),
      hasMoreQuestions,
      isLogin,
      userStore: userStoreRef, // 向模板暴露 userStore
      router, // 向模板暴露 router
      loadMore,
      viewQuestionDetail,
      formatTime,
      handleTabChange,
      handleVote,
      handleBookmark,
      handleLike,
      handleShare,
      getQuestionTags,
      checkVotesStatus,
      checkCollectionStatus,
    }
  }
}
</script>

<style scoped>
.home-content {
  margin-top: 1rem;
}

.content-layout {
  display: flex;
  gap: 24px;
  margin-top: 24px;
}

.main-area {
  flex: 1;
}

.sidebar {
  width: 300px;
}

@media (max-width: 768px) {
  .content-layout {
    flex-direction: column;
  }
  
  .sidebar {
    width: 100%;
    margin-top: 24px;
  }
}

/* 排序选项 */
.sorting-options {
  margin-bottom: 16px;
  text-align: right;
}

/* 问题卡片样式 */
.question-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  padding: 16px;
  margin-bottom: 16px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.question-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.question-card-header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.user-info {
  margin-left: 12px;
}

.username {
  font-weight: 500;
  color: #333;
}

.publish-time {
  font-size: 12px;
  color: #999;
  margin-top: 2px;
}

.question-title {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.question-preview {
  margin: 0 0 16px;
  color: #666;
  font-size: 14px;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.question-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #f0f0f0;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  margin-right: 8px;
}

.tag-item {
  margin-right: 8px;
  margin-bottom: 4px;
}

.interaction-area {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.vote-area {
  display: flex;
  align-items: center;
}

.vote-btn {
  padding: 4px;
  border-radius: 50%;
  color: #606266;
  transition: all 0.3s ease;
}

.vote-btn:hover {
  background-color: #f0f2f5;
  color: #409eff;
  transform: scale(1.1);
}

.vote-btn.is-active {
  color: #409eff;
  background-color: rgba(64, 158, 255, 0.1);
}

.vote-count {
  margin: 0 4px;
  font-weight: 500;
  color: #606266;
  min-width: 20px;
  text-align: center;
}

.answer-count {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #606266;
  font-size: 14px;
}

.action-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #606266;
  font-size: 14px;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.action-btn:hover {
  background-color: #f0f2f5;
  color: #409eff;
}

.is-active {
  color: #409eff;
  font-weight: 500;
}

.is-active:hover {
  background-color: rgba(64, 158, 255, 0.1);
}

@media (max-width: 640px) {
  .question-footer {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .tags {
    margin-bottom: 12px;
  }
  
  .interaction-area {
    width: 100%;
    justify-content: space-between;
  }
}

/* 加载更多按钮 */
.load-more-container {
  margin-top: 24px;
  text-align: center;
}

/* 侧边栏卡片样式 */
.sidebar-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  margin-bottom: 24px;
  overflow: hidden;
}

.card-header {
  padding: 16px;
  border-bottom: 1px solid #eee;
}

.card-title {
  margin: 0;
  font-size: 16px;
  color: #333;
}

.card-body {
  padding: 16px;
}

.topic-list, .user-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.topic-item, .user-item {
  margin-bottom: 12px;
}

.topic-item:last-child, .user-item:last-child {
  margin-bottom: 0;
}

.topic-link, .user-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #333;
  text-decoration: none;
}

.topic-link:hover, .user-link:hover {
  color: #409eff;
}

.topic-count {
  font-size: 12px;
  color: #909399;
  background-color: #f5f7fa;
  padding: 2px 6px;
  border-radius: 10px;
}

.user-link {
  display: flex;
  align-items: center;
  color: #333;
  text-decoration: none;
}

.user-info {
  margin-left: 8px;
  display: flex;
  flex-direction: column;
}

.user-name {
  font-weight: 500;
}

.user-activity {
  font-size: 12px;
  color: #909399;
  margin-top: 2px;
}

.topic-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #333;
  text-decoration: none;
  padding: 6px 0;
  border-radius: 4px;
  transition: all 0.3s;
}

.topic-link:hover {
  color: #409eff;
  padding-left: 4px;
  background-color: rgba(64, 158, 255, 0.05);
}

/* 空状态 */
.empty-list {
  padding: 40px 0;
  text-align: center;
}

/* 加载状态 */
.question-list-loading {
  padding: 16px;
  background: #fff;
  border-radius: 8px;
}

.admin-tools {
  margin-top: 24px;
  padding: 16px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.section-header {
  margin-bottom: 16px;
}

.admin-actions {
  text-align: right;
}

/* 滚动条美化 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

.loading-placeholder {
  padding: 10px;
}

/* 避免空状态时的过大间距 */
.el-empty {
  padding: 20px 0;
}
</style>
